<template>
  <div id="aplayer">
  </div>
</template>

<script setup>
let ap = ref(null);

const props = defineProps({
  title: {
    type: String,
    default: 'Dreamer'
  },
  url: {
    type: String,
    default: ''
  },
  cover: {
    type: String,
    default: 'https://cdn.jsdelivr.net/gh/xiaoyao-xiaoyao/cdn/music/Dreamer.jpg'
  }
})

onMounted(() => {
  ap.value = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: props.title,
      artist: '满多多',
      url: props.url,
      cover: props.cover
    }]
  });
})

onBeforeUnmount(() => ap.value.destroy())
</script>

<style scoped>

</style>
